<template>
  <div>
    <template v-for="(v, i) in imgArr">
      <img
        :key="i"
        :src="'http://localhost:8081/uploads/' + v"
        class="avatar"
        style="display: inline"
        alt=""
      />
    </template>
    <input type="file" multiple @change="changeIpt" />
    <el-progress
      :text-inside="true"
      :stroke-width="26"
      :percentage="percentage"
    ></el-progress>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      // imageUrl: "",
      imgArr: [],
      percentage: 0,
    };
  },
  methods: {
    changeIpt(e) {
      let fd = new FormData();
      console.log(fd);
      e.target.files.forEach((v) => {
        fd.append("file", v);
      });
      axios({
        url: "http://localhost:8081/upload/imgs",
        method: "post",
        data: fd,
        onUploadProgress: (progressEvent) => {
          this.percentage = (progressEvent.loaded / progressEvent.total) * 100;
        },
      }).then((v) => {
        this.imgArr = v.data.data;
        console.log(v.data.data);
      });
    },
  },
};
</script>

<style scoped>
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
